*{
    padding: 0;
    margin: 0;
}
/*公共样式*/
.go{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: fixed;
    z-index: 1001;
    right: 30px;
    top: 100px;
}
.more{
    position: fixed;
    right: 60px;
    bottom: 80px;
    z-index: 1001;
    animation: more .8s linear infinite alternate;
}
/*公共样式*/

/*第一屏*/
.content{
    width: 900px;
    height: 600px;
    background: rgba(0,0,0,.1);
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -450px;
}
.screen01{
    background: url("../images/01-bg.png") no-repeat center bottom;
}
.screen01 .goods{
    text-align: center;
    margin-top: 230px;

}
.screen01 .sofa{
    position:absolute;
    left:200px ;
    top: 200px;
    animation: sofa 1s linear infinite alternate;
}
.screen01 .fly{
    position: absolute;
    top: 0;
    right: 0;
    animation: fly01 1s linear infinite alternate;
}
/*第一屏*/

/*第一屏动画*/
@keyframes fly01 {
    from{
        transform: translateY(-30px);
    }
    to{
        transform: translateY(30px);
    }
}
@keyframes more {
    from{
        transform: translateY(-20px);
    }
    to{
        transform: translateY(20px);
    }
}
@keyframes sofa {
    from{
        transform: translateY(-20px);
    }
    to{
        transform: translateY(20px);
    }
}
/*第一屏动画*/

/*第二屏*/
.screen02{
    background: url("../images/02-bg.png") no-repeat center bottom;

}
.screen02 .goods{
    position: absolute;
    left: 50%;
    margin-left: -220px;
    bottom: 210px;
    transform: scale(0);
    transform-origin: right bottom;
}
.screen02 .sofa{
    transform: scale(0.5);
    position: absolute;
    left: 292px;
    top: 132px;
    opacity: 0;
    z-index: 1002;
}
.screen02 .input{
    position: absolute;
    /*transform: scale(.7);*/
    right: 171px;
    top: 120px;
    transform-origin: right top;
    opacity: 0;
}
.screen02 .input .key{
    position: absolute;
    left: 100px;
    top: 4px;
    opacity: 0;
}
.screen02 .input .search{
}
.screen02 .text{
    text-align: center;
}
.screen02 .text .text02{
    opacity: 0;
    position: absolute;
}


/*第二屏*/

/*第二屏动画*/
.screen02.now .text .text01{
    opacity: 0;
    position: absolute;

}
.screen02.now .text .text02{
    opacity: 1;
    position: static;
    transition: opacity 1s linear;
}
.screen02.now .input{
    /*动画播放完成状态控制  默认属性backwards(回到起点) forwards(保持)*/
    animation:input02 3s linear forwards;
}
.screen02.now .goods{
    transform: none;
    transition: all 1s linear 2s;
}
.screen02.now .input .key{
    opacity: 1;
    transition: all 1s linear 1s;
}
.screen02.leaved .sofa{
    animation: sofa02 1s linear;
}
/*第二屏动画*/
@keyframes input02 {
    0%{
        opacity: 1;
        transform: translate(2000px,130px);
    }
    33.3%{
        transform: translate(-180px,130px);
    }
    67%{
        transform: translate(-180px,130px);
    }
    100%{
        opacity: 1;
        transform: scale(0.7);
    }
}
@keyframes sofa02 {
    from{
        opacity: 1;
    }
    to{
        opacity: 1;
        transform: translate(-80px,780px);
    }
}
/*第三屏*/
.screen03{
    background: url("../images/03-bg.png") no-repeat center bottom;
}
.screen03 .change{
    position: absolute;
    bottom: 170px;
    right: 115px;
}
.screen03 .change img:last-child{
    position: absolute;
    opacity: 0;
}
.screen03 .cart img:last-child{
    position: absolute;
    opacity: 0;
}
.screen03 .cart{
    position: absolute;
    bottom: 100px;
    right: 195px;
}
.screen03.now .change img:first-child{
    display: none;
}

.screen03.now .change img:last-child{
    opacity: 1;
    position: static;
    transition: all 1s linear;
}
.screen03.now .cart img:last-child{
    opacity: 1;
    position: static;
    transition: all 1s linear;
}
.screen03.now .cart img:first-child{
    display: none;
}
.screen03 .sofa{
    position: absolute;
    top:170px;
    left:215px;
    display: none;
}
.screen03.now .sofa{
    display: block;
    z-index: 1001;
}
.screen03.leaved .sofa{
    animation: sofa03 1s linear;
}
@keyframes sofa03 {
    from{}
    to{
        transform: translate(190px,666px) rotate(45deg);
    }
}
/*第三屏*/
/*第四屏*/
.screen04{
    background: url("../images/04-bg.png") no-repeat center bottom;
}
.screen04 .cloud{
    position: absolute;
    left: -150px;
    top: -65px;
    animation:cloud 20s linear infinite alternate;/*逆播放*/
}
.screen04 .text{
    text-align: center;
    margin-top: 120px;
}
.screen04 .text img:last-child{
    position: absolute;
    opacity: 0;
}

.screen04.now .text img:last-child{
    position: static;
    opacity: 1;
    transition: all 1s linear 3s;
}
.screen04.now .text img:first-child{
    position: absolute;
    opacity: 0;
    transition: all 1s linear 3s;
}
.screen04 .cart{
    text-align: center;
    margin-top: 50px;
    position: relative;
    z-index: 1002;
}
.screen04 .sofa{
    position: absolute;
    top:200px;
    left:400px;
    transform: rotate(45deg);
    opacity: 0;
}
/*1.掐时间  做延时  完成动画的衔接*/
/*2.jquery的动画  $('dom').animate(property,duration,speed,callback) */
/*speed  (swing linear) */
/*3.能不能监听到动画或者过度的结束*/
/*4.css3当中 过渡 transitionend  动画 animationend*/
.screen04.now .sofa{
    opacity: 1;
    transform: translateX(1000px);
    transition: transform 3s linear;
}
.screen04.now .cart{
    transform: translateX(1000px);
    transition: all 3s linear;
}
.screen04 .address{
    position: absolute;
    width: 283px;
    z-index: 1001;
    bottom: 100px;
    left: 50%;
    margin-left: -140px;
    /*opacity: 0;*/
}
.screen04 .address img{
    opacity: 0;
}
.screen04.now .address img:first-child {
    opacity: 1;
    transition: all 1s linear 3s;
}
.screen04.now .address img:last-child {
    opacity: 1;
    transition: all 1s linear 3.5s;
}
.screen04 .address img:last-child{
    position: absolute;
    top: 60px;
    left: 50%;
    margin-left: -85px;
}

/*第四屏*/

/*第四屏动画*/
@keyframes cloud {
    from{

    }
    to{
        transform: translateX(1000px);
    }
}
/*第四屏动画*/

/*第五屏*/
.screen05{
    background: url("../images/05-bg.png") no-repeat center bottom;
}
.screen05 .content{
    height: 100%;
    background: rgba(0,0,0,0.2);
}
.screen05 .sofa{
    position: absolute;
    bottom: 100px;
    left: 100px;
    opacity: 0;
    z-index: 1001;
}
.screen05 .card{
    position: absolute;
    left: 0;
    bottom: 210px;
    z-index: 1002;
}
.screen05 .card .cardImg{
    position: relative;
    z-index: 1;
}
.screen05 .card .orderImg{
    position: absolute;
    left: 130px;
    top:-80px;
    transform: translateY(80px);
}
.screen05 .mouse{
    position: absolute;
    right: 0;
    top: 0;
    overflow: hidden;
    height: 100%;
    width: 400px;

}
.screen05 .mouse .m1,
.screen05 .mouse .m2{
    position: absolute;
    bottom: 240px;
    right: 0;
}
.screen05 .mouse .m2{
    opacity: 0;
}
.screen05 .mouse .hand{
    position: absolute;
    bottom: 0;
    right: 50px;
    transform: translateY(500px);
}
/*第五屏*/
/*第五屏动画*/
.screen05.now .mouse .hand{
    transform: none;
    transition:all 1s linear ;
}
.screen05.now .mouse .m2{
    opacity: 1;
    transition: all .5s linear 1s ;
}
.screen05 .text{
    position: absolute;
    bottom: 550px;
    left: 0;
}
.screen05.now .sofa{
    animation: sofa05 2s linear 1.5s forwards;
}
@keyframes sofa05 {
    from{
        transform: translateY(-1000px) rotate(30deg);
        opacity: 1;
    }
    50%{
        transform: translateY(-150px) rotate(30deg);
    }
    100%{
        opacity: 1;
        transform: rotate(30deg);
    }

}
.screen05.now .card .orderImg{
    transform: none;
    transition: all 1s linear 2.5s ;
}
.screen05.leaved .sofa{
    animation: sofa05-06 1s linear;
}
@keyframes sofa05-06 {
    from{
        opacity: 1;
        transform: rotate(30deg);
    }
    to{
        opacity: 1;
        transform: translateY(450px) scale(0.2) rotate(30deg);
    }
}
/*第五屏动画*/

/*第六屏*/
.screen06{
    background: url("../images/06-bg.png") no-repeat 25% bottom;
}
.screen06.now{
    background: url("../images/06-bg.png") no-repeat 100% bottom;
    transition: background 1s linear 1s;
}
.screen06 .cloud{
    position: absolute;
    top: -50px;
    left: 0;
}
.screen06 .cloud img:first-child{
   animation: cloud06 30s linear infinite alternate;
}
.screen06 .cloud img:last-child{
    position: absolute;
    top: 0;
    left: 0;
    animation: cloud06 20s linear infinite alternate;
}
@keyframes cloud06 {
    from{

    }
    to{
        transform: translateX(1000px);
    }
}
.screen06 .text{
    position: absolute;
    top: 80px;
    left: 140px;
    z-index: 1000;
}
.screen06 .text img:last-child{
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
}
.screen06 .box{
    position: absolute;
    top: 150px;
    left: 140px;
    z-index: 1002;
}
.screen06 .box.show{
    animation: box06 2s linear forwards;
}
@keyframes box06 {
    from{
        transform: translateX(-500px);
    }
    50%{
        transform: none;
    }
    to{
        transform: translateY(330px) scale(0.3);
    }
}

.screen06 .car{
    position: absolute;
    bottom: 0;
    left: 100px;
    z-index: 1003;
}
.screen06 .car img{
    position: absolute;
    opacity: 0;
   /* top: 0;
    left: 0;*/
}
.screen06 .car .buyer{
    left: 160px;
    top: -50px;
}
.screen06 .car .address{
    left: 160px;
    top: -50px;
}
.screen06.now .car .buyer{
    opacity: 1;
    transition: all .25s linear 1s;
}
.screen06.now .car .address{
    opacity: 1;
    transition: all .25s linear 1.75s;
}
.screen06 .car .carImg{
    opacity: 1;
    position: relative;
}
.screen06 .car .worker{
    bottom: 0;
    left: 0;
    transform: scale(0);
    transform-origin: left bottom;
}
.screen06.now .car .worker{
    animation: work06 2.1s linear 2s forwards;
}
@keyframes work06 {
    from{
        opacity: 1;
    }
    33.3%{
        transform: scale(1);
    }
    67%{
        transform: scale(1) translateY(-100px);
    }
    100%{
        opacity: 1;
        transform: scale(1) translateY(-100px) translateX(200px);
    }
}
.screen06 .car .say{
    right: -280px;
    top: -400px;
}
.screen06.now .car .say{
    opacity: 1;
    transition: all .5s linear 4.1s;
}
.screen06 .person{
    width: 106px;
    height: 150px;
    position: absolute;
    right: 50px;
    bottom: 116px;
}
.screen06 .person .door{
    opacity: 0;
}
.screen06 .person .personImg{
    position: absolute;
    left: 0;
    bottom: 0;
    transform: scale(0);
    transform-origin: right bottom;
}
.screen06.now .person .door{
    opacity: 1;
    transition: all 0.4s linear 4.6s;
}
.screen06.now .person .personImg{
    transform: none;
    right: 100px;
    transition: transform .5s linear 5s,right .5s linear 5.5s ;
}
.screen06.now .text img:last-child{
    opacity: 1;
    transition: all 1s linear 4.6s;
}
.screen06.now .text img:first-child{
    opacity: 0;
    transition: all .5s linear 4.6s;
}
/*第六屏*/

/*第七屏*/
.screen07{
    background: url("../images/07-bg.png") no-repeat center bottom;
}
.screen07 .star{
    position: absolute;
    left: 157px;
    top:141px;

}
.screen07 .star img{
    float: left;
    margin-right: 6px;
    display: none;
}
.screen07 .text{
    position: absolute;
    left: 157px;
    top:180px;
    opacity: 0;
    transform: scale(0);
    transform-origin: left bottom;
}
.screen07 .text.show{
    opacity: 1;
    animation:text07 1.2s linear 2.5s forwards ;
}
@keyframes text07 {
    from{

    }
    70%{
        opacity: 1;
        transform: scale(1.2);
    }
    100%{
        transform: none;
    }
}

/*第七屏*/

/*第八屏*/
.screen08{
    background: url("../images/08-bg.png");
}
.screen08 .btn{
    width: 389px;
    height: 160px;
    position: absolute;
    left: 50%;
    margin-left: -195px;
}
.screen08 .btn img:last-child{
    position: absolute;
    left:0 ;
    top: 0;
    opacity: 0;
}
.screen08 .btn:hover img:last-child{
    opacity: 1;
}
.screen08 .again{
    position: absolute;
    right: 0;
    top: 80px;
}
.screen08 .hand{
    position: absolute;
    left: 50%;
    top: 100px;
    transform: translateX(-50%);
}
/*第八屏*/